<template>
  <div class="container" ref="mainCon">
    <div class="reminder" v-if="showHistory">
      <i class="el-icon-warning"></i
      >工资发放成功后，请上传相关附件、或由工人在【工匠365】确认工资表。
    </div>
    <el-row class="topSection boxBorder" v-if="showHistory">
      <div class="topBox">
        <el-col :span="14">
          <div class="">
            <el-select
              v-model="projectId"
              filterable
              placeholder="暂无关联项目"
              @change="changeProject"
            >
              <el-option
                v-for="(item, index) of projectList"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col
          :span="10"
          class="alignRight"
          v-if="isMini !== 1 || miniRule.isSalary === 1"
        >
          <div class="btnBox">
            <el-link
              type="primary"
              @click="downLoad('csSalaryOperate')"
              class="uploadBtn"
              >点击下载操作说明</el-link
            >
            <el-button
              round
              type="primary"
              @click="hasToCreateSalary"
              v-show="isShowAdd"
              class="createSalaryBut"
              >制作工资表</el-button
            >
          </div>
        </el-col>
      </div>
    </el-row>
    <div class="mainCon">
      <template v-if="isMini !== 1 || miniRule.isSalary === 1 || !showHistory">
        <el-row
          class="toolbar searchInputWidth"
          style="padding-bottom: 0; margin-top: 24px !important"
        >
          <el-form :inline="true" :model="filterField" ref="searchConditions">
            <el-col :lg="8" :xl="6">
              <el-form-item label="创建时间" class="row-padding-bottom">
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="发薪年月" class="row-padding-bottom">
                <el-date-picker
                  v-model="filterField.yearMonth"
                  type="month"
                  value-format="yyyy-MM"
                  placeholder="选择月"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <template v-if="advanced">
              <el-col :lg="8" :xl="6">
                <el-form-item label="工资表状态" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.status"
                    filterable
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in salaryStateOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item
                  label="是否上传考勤表"
                  class="row-padding-bottom lineFeedSty"
                >
                  <el-select
                    v-model="filterField.isAttFileStr"
                    filterable
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in isFileStrArr"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item
                  label="是否上传工人签字确认表"
                  class="row-padding-bottom lineFeedSty"
                >
                  <el-select
                    v-model="filterField.isEmployeeFileStr"
                    filterable
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in isFileStrArr"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item
                  label="是否上传银行回执"
                  class="row-padding-bottom lineFeedSty"
                >
                  <el-select
                    v-model="filterField.isBankFileStr"
                    filterable
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in isFileStrArr"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </template>
            <el-col :lg="8" :xl="6">
              <el-form-item label="">
                <a
                  @click="toggleAdvanced"
                  style="margin-left: 40px; color: #409eff; cursor: pointer"
                  class="btnColor"
                >
                  {{ advanced ? '收起' : '展开' }}
                  <i
                    :class="
                      advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                    "
                  ></i>
                </a>
                <el-button
                  type="primary"
                  icon="icon iconfont iconchazhao1"
                  @click="searchList"
                  class="searchBtn"
                >
                  <span>搜索</span>
                </el-button>
                <el-link
                  style="margin-left: 10px"
                  type="primary"
                  v-if="
                    (isMini !== 1 || miniRule.isSalary === 1) && showHistory
                  "
                  @click="goHistory"
                  v-sdc
                  class="fontBtn"
                  >历史记录</el-link
                >
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div class="spacing"></div>
        <div
          ref="tableBox"
          :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
        >
          <el-table
            ref="tableBox1"
            :max-height="tableHeight"
            :data="salaryList"
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            style="border: 1px solid #dfe6ec"
          >
            <el-table-column
              prop="year,month,batchNo,createTime"
              label="工资表信息"
              width="220px"
            >
              <template slot-scope="scope">
                <p style="olor: rgb(96, 98, 102); font-weight: bold">
                  {{ scope.row.year || '--' }}年{{
                    scope.row.month || '--'
                  }}月第{{ scope.row.batchNo || '--' }}批次工资
                </p>
                <p style="color: #999; font-size: 12px">
                  订单号： {{ scope.row.sequenceCode || '--' }}
                </p>
                <p style="color: #999; font-size: 12px" v-show="!isHsUser()">
                  创建日期： {{ scope.row.createTime || '--' }}
                </p>
              </template>
            </el-table-column>
            <el-table-column
              prop="shouldPay,bankActPay"
              label="应发/到账工资总额（元）"
              align="center"
              width="190"
            >
              <template slot-scope="scope">
                <p>
                  ￥{{ scope.row.shouldPay || '0' }} / ￥{{
                    scope.row.bankActPay || '- -'
                  }}
                </p>
              </template>
            </el-table-column>
            <el-table-column
              prop="shouldPayTotal,bankActPayTotal"
              label="应发/到账总人数"
              align="center"
              width="190"
              :formatter="formatTd"
            >
              <template slot-scope="scope">
                <p>
                  {{ scope.row.shouldPayTotal || '0' }} /
                  {{ scope.row.bankActPayTotal || '- -' }}
                </p>
              </template>
            </el-table-column>
            <el-table-column
              prop="statusDesc"
              label="工资表状态"
              align="center"
              width="160"
              :formatter="formatTd"
            >
              <template slot-scope="scope">
                <ul>
                  <li>
                    {{ scope.row.statusDesc }}
                    <span
                      v-if="scope.row.sendTypeDesc"
                      class="generationMethod fontColorTheme fontBorderTheme"
                      >{{ scope.row.sendTypeDesc }}</span
                    >
                  </li>
                </ul>
              </template>
            </el-table-column>
            <!-- <el-table-column label="是否上传附件" align="center">
              <template slot-scope="scope">
                  <p>{{scope.row.isFileStr || '--'}}</p>
              </template>
          </el-table-column> -->
            <el-table-column label="是否上传考勤表" align="center" width="180">
              <template slot-scope="scope">
                <p>{{ scope.row.isAttFileStr || '--' }}</p>
              </template>
            </el-table-column>
            <el-table-column
              label="是否上传工人签字确认表"
              align="center"
              width="210"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.isEmployeeFileStr || '--' }}</p>
              </template>
            </el-table-column>
            <el-table-column
              label="是否上传银行回执"
              align="center"
              width="180"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.isBankFileStr || '--' }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="shouldPayTotal"
              sortable="custom"
              label="app已确认人数"
              align="center"
              width="180"
            >
              <template slot-scope="scope">
                <p>
                  {{
                    scope.row.confirmTotal === null
                      ? '--'
                      : scope.row.confirmTotal
                  }}/{{ scope.row.shouldPayTotal || '--' }}
                </p>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="left"
              fixed="right"
              width="230"
            >
              <template slot-scope="scope">
                <!-- 劳务公司(分包账号) -->
                <div v-if="$store.state.userType == 'FENBAO_MANAGER'">
                  <!-- 待提交 -->
                  <div v-if="scope.row.status == 'CONFIRMED'">
                    <el-link
                      type="primary"
                      @click="handleEdit(scope.$index, scope.row)"
                      v-show="
                        isShowUpdate &&
                        (isMini !== 1 || miniRule.isSalary === 1 || showHistory)
                      "
                      >编辑</el-link
                    >
                    <el-link
                      type="primary"
                      @click="deleteSalary(scope.$index, scope.row)"
                      v-show="
                        isShowDel &&
                        (isMini !== 1 || miniRule.isSalary === 1 || showHistory)
                      "
                      >删除</el-link
                    >
                    <el-link
                      type="primary"
                      @click="exporTableAjax(scope.$index, scope.row)"
                      v-show="isShowExport"
                      >下载工资表</el-link
                    >
                  </div>
                  <!-- 待施工方审核 -->
                  <div v-else-if="scope.row.status == 'SG_AUDIT'">
                    <el-link
                      type="primary"
                      v-show="
                        isShowUpdate &&
                        (isMini !== 1 || miniRule.isSalary === 1 || showHistory)
                      "
                      @click="toRecall(scope.$index, scope.row)"
                      >撤回</el-link
                    >
                    <el-link
                      type="primary"
                      @click="exporTableAjax(scope.$index, scope.row)"
                      v-show="isShowExport"
                      >下载工资表</el-link
                    >
                    <el-link
                      type="primary"
                      @click="toUploadFile(scope.$index, scope.row)"
                      v-show="
                        isShowUpdate &&
                        (isMini !== 1 || miniRule.isSalary === 1 || showHistory)
                      "
                      >上传附件</el-link
                    >
                  </div>
                  <!-- 待建设方和待劳动监察审核 -->
                  <div
                    v-else-if="
                      scope.row.status == 'OWER_AUDIT' ||
                      scope.row.status == 'JC_AUDIT'
                    "
                  >
                    <div>
                      <el-link
                        type="primary"
                        @click="toSalaryDetail(scope.$index, scope.row)"
                        v-show="isShowDetail"
                        >查看详情</el-link
                      >
                      <el-link
                        type="primary"
                        @click="exporTableAjax(scope.$index, scope.row)"
                        v-show="isShowExport"
                        >下载工资表</el-link
                      >
                      <el-link
                        type="primary"
                        @click="toUploadFile(scope.$index, scope.row)"
                        v-show="
                          isShowUpdate &&
                          (isMini !== 1 ||
                            miniRule.isSalary === 1 ||
                            showHistory)
                        "
                        >上传附件</el-link
                      >
                    </div>
                  </div>
                  <!-- 待支付 -->
                  <div v-else-if="scope.row.status == 'NO_PAY'">
                    <el-link
                      type="primary"
                      v-show="isShowDetail"
                      @click="toSalaryDetail(scope.$index, scope.row)"
                      >查看详情</el-link
                    >
                    <el-link
                      type="primary"
                      @click="exporTableAjax(scope.$index, scope.row)"
                      v-show="isShowExport"
                      >下载工资表</el-link
                    >
                    <el-link
                      type="primary"
                      @click="toPay(scope.$index, scope.row)"
                      v-show="
                        isShowUpdate &&
                        (isMini !== 1 || miniRule.isSalary === 1 || showHistory)
                      "
                      >支付</el-link
                    >
                  </div>
                  <!-- 已驳回 -->
                  <div v-else-if="scope.row.status == 'REJECTED'">
                    <div>
                      <el-link
                        type="primary"
                        @click="toSalaryDetail(scope.$index, scope.row)"
                        v-show="isShowDetail"
                        >查看详情</el-link
                      >
                      <el-link
                        type="primary"
                        @click="exporTableAjax(scope.$index, scope.row)"
                        v-show="isShowExport"
                        >下载工资表</el-link
                      >
                      <el-link
                        type="primary"
                        @click="toOpenDialogReject(scope.$index, scope.row)"
                        v-show="isShowDetail"
                        >驳回原因</el-link
                      >
                    </div>
                  </div>
                  <div v-else>
                    <el-link
                      type="primary"
                      @click="toSalaryDetail(scope.$index, scope.row)"
                      v-show="isShowDetail"
                      >查看详情</el-link
                    >
                    <el-link
                      type="primary"
                      @click="exporTableAjax(scope.$index, scope.row)"
                      v-show="isShowExport"
                      >下载工资表</el-link
                    >
                    <el-link
                      type="primary"
                      @click="toUploadFile(scope.$index, scope.row)"
                      v-show="
                        isShowUpdate &&
                        (isMini !== 1 || miniRule.isSalary === 1 || showHistory)
                      "
                      >上传附件</el-link
                    >
                    <el-link
                      type="primary"
                      @click="downloaDauthorization(scope.$index, scope.row)"
                      v-show="isShowExport && scope.row.typeDesc == '待发放'"
                      >下载授权单</el-link
                    >
                  </div>
                </div>
                <!-- 施工方（项目账号/企业账号） -->
                <div
                  v-if="
                    $store.state.userType == 'PROJECT_ADMINISTRATOR' ||
                    ($store.state.userType == 'COMPANY' &&
                      filterField.sysAppCode === 'constructor')
                  "
                >
                  <!-- 待提交 -->
                  <div v-if="scope.row.status == 'CONFIRMED'">
                    <el-link
                      type="primary"
                      @click="handleEdit(scope.$index, scope.row)"
                      v-show="
                        isShowUpdate &&
                        (isMini !== 1 || miniRule.isSalary === 1 || showHistory)
                      "
                      >编辑</el-link
                    >
                    <el-link
                      type="primary"
                      @click="deleteSalary(scope.$index, scope.row)"
                      v-show="
                        isShowDel &&
                        (isMini !== 1 || miniRule.isSalary === 1 || showHistory)
                      "
                      >删除</el-link
                    >
                    <el-link
                      type="primary"
                      @click="exporTableAjax(scope.$index, scope.row)"
                      v-show="isShowExport"
                      >下载工资表</el-link
                    >
                  </div>
                  <!-- 待施工方审核 -->
                  <div v-else-if="scope.row.status == 'SG_AUDIT'">
                    <el-link
                      type="primary"
                      @click="toCheckSG(scope.$index, scope.row)"
                      v-show="
                        isShowUpdate &&
                        (isMini !== 1 || miniRule.isSalary === 1 || showHistory)
                      "
                      >审核</el-link
                    >
                    <el-link
                      type="primary"
                      @click="toSalaryDetail(scope.$index, scope.row)"
                      v-show="isShowDetail"
                      >查看详情</el-link
                    >
                    <el-link
                      type="primary"
                      @click="exporTableAjax(scope.$index, scope.row)"
                      v-show="isShowExport"
                      >下载工资表</el-link
                    >
                    <el-link
                      type="primary"
                      @click="toUploadFile(scope.$index, scope.row)"
                      v-show="
                        isShowUpdate &&
                        (isMini !== 1 || miniRule.isSalary === 1 || showHistory)
                      "
                      >上传附件</el-link
                    >
                  </div>
                  <!-- 待建设方和待劳动监察审核 -->
                  <div
                    v-else-if="
                      scope.row.status == 'OWER_AUDIT' ||
                      scope.row.status == 'JC_AUDIT'
                    "
                  >
                    <div>
                      <el-link
                        type="primary"
                        @click="toSalaryDetail(scope.$index, scope.row)"
                        v-show="isShowDetail"
                        >查看详情</el-link
                      >
                      <el-link
                        type="primary"
                        @click="exporTableAjax(scope.$index, scope.row)"
                        v-show="isShowExport"
                        >下载工资表</el-link
                      >
                      <el-link
                        type="primary"
                        @click="toUploadFile(scope.$index, scope.row)"
                        v-show="
                          isShowUpdate &&
                          (isMini !== 1 ||
                            miniRule.isSalary === 1 ||
                            showHistory)
                        "
                        >上传附件</el-link
                      >
                    </div>
                  </div>
                  <!-- 待支付 -->
                  <div v-else-if="scope.row.status == 'NO_PAY'">
                    <el-link
                      type="primary"
                      v-show="isShowDetail"
                      @click="toSalaryDetail(scope.$index, scope.row)"
                      >查看详情</el-link
                    >
                    <el-link
                      type="primary"
                      @click="exporTableAjax(scope.$index, scope.row)"
                      v-show="isShowExport"
                      >下载工资表</el-link
                    >
                    <el-link
                      type="primary"
                      @click="toPay(scope.$index, scope.row)"
                      v-show="
                        isShowUpdate &&
                        (isMini !== 1 || miniRule.isSalary === 1 || showHistory)
                      "
                      >支付</el-link
                    >
                  </div>
                  <!-- 已驳回 -->
                  <div v-else-if="scope.row.status == 'REJECTED'">
                    <div>
                      <el-link
                        type="primary"
                        @click="toSalaryDetail(scope.$index, scope.row)"
                        v-show="isShowDetail"
                        >查看详情</el-link
                      >
                      <el-link
                        type="primary"
                        @click="exporTableAjax(scope.$index, scope.row)"
                        v-show="isShowExport"
                        >下载工资表</el-link
                      >
                      <el-link
                        type="primary"
                        @click="toOpenDialogReject(scope.$index, scope.row)"
                        v-show="isShowDetail"
                        >驳回原因</el-link
                      >
                    </div>
                  </div>
                  <div v-else>
                    <el-link
                      type="primary"
                      @click="toSalaryDetail(scope.$index, scope.row)"
                      v-show="isShowDetail"
                      >查看详情</el-link
                    >
                    <el-link
                      type="primary"
                      @click="exporTableAjax(scope.$index, scope.row)"
                      v-show="isShowExport"
                      >下载工资表</el-link
                    >
                    <el-link
                      type="primary"
                      @click="toUploadFile(scope.$index, scope.row)"
                      v-show="
                        isShowUpdate &&
                        (isMini !== 1 || miniRule.isSalary === 1 || showHistory)
                      "
                      >上传附件</el-link
                    >
                    <el-link
                      type="primary"
                      @click="downloaDauthorization(scope.$index, scope.row)"
                      v-show="
                        isShowExport &&
                        (scope.row.typeDesc == '已发放' ||
                          scope.row.typeDesc == '待发放')
                      "
                      >下载授权单</el-link
                    >
                  </div>
                </div>
                <!-- 建设方（项目账号/企业账号） -->
                <div
                  v-if="
                    $store.state.userType == 'PROJECT_OWNER' ||
                    ($store.state.userType == 'COMPANY' &&
                      filterField.sysAppCode === 'owner')
                  "
                >
                  <!-- 待建设方审核 -->
                  <div v-if="scope.row.status == 'OWER_AUDIT'">
                    <el-link
                      type="primary"
                      @click="toSalaryDetail(scope.$index, scope.row, 'SH')"
                      v-show="
                        isShowUpdate &&
                        (isMini !== 1 || miniRule.isSalary === 1 || showHistory)
                      "
                      >审核</el-link
                    >
                    <el-link
                      type="primary"
                      @click="toSalaryDetail(scope.$index, scope.row)"
                      v-show="isShowDetail"
                      >查看详情</el-link
                    >
                    <el-link
                      type="primary"
                      @click="toUploadFileDetail(scope.$index, scope.row)"
                      v-show="isShowDetail"
                      >查看附件</el-link
                    >
                  </div>
                  <!-- 已驳回 -->
                  <div v-else-if="scope.row.status == 'REJECTED'">
                    <div>
                      <el-link
                        type="primary"
                        @click="toSalaryDetail(scope.$index, scope.row)"
                        v-show="isShowDetail"
                        >查看详情</el-link
                      >
                      <el-link
                        type="primary"
                        @click="toUploadFileDetail(scope.$index, scope.row)"
                        v-show="isShowDetail"
                        >查看附件</el-link
                      >
                      <el-link
                        type="primary"
                        @click="toOpenDialogReject(scope.$index, scope.row)"
                        v-show="isShowDetail"
                        >驳回原因</el-link
                      >
                    </div>
                  </div>
                  <div v-else>
                    <el-link
                      type="primary"
                      @click="toSalaryDetail(scope.$index, scope.row)"
                      v-show="isShowDetail"
                      >查看详情</el-link
                    >
                    <el-link
                      type="primary"
                      @click="toUploadFileDetail(scope.$index, scope.row)"
                      v-show="isShowDetail"
                      >查看附件</el-link
                    >
                    <template v-if="isEsUser()">
                      <el-link
                        type="primary"
                        @click="downloaDauthorization(scope.$index, scope.row)"
                        v-show="
                          isShowExport &&
                          (scope.row.typeDesc == '已发放' ||
                            scope.row.typeDesc == '待发放')
                        "
                        >下载授权单</el-link
                      >
                    </template>
                  </div>
                </div>
              </template>
            </el-table-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty" v-show="isShow">
              <emptyTable emptyText="暂无相关信息"></emptyTable>
            </div>
          </el-table>
          <!-- filterField为搜索条件 -->
          <!-- getTableList为获取子组件的数据 -->
          <Pagination
            ref="pagination"
            @getList="getTableList"
            :filterField="filterField"
            :requestUrl="requestUrl"
          ></Pagination>
        </div>
      </template>
      <salary-attach-record
        v-if="isMini === 1 && miniRule.isSalary === 0 && showHistory"
        :projectId="projectId"
        :showHistory="true"
        path="/home/salaryDf/companySalaryBatchListPage"
        backPath="/home/salaryDf/companySalaryBatchList"
        oldUrl="/home/salaryDf/companySalaryBatchList"
      ></salary-attach-record>
      <!-- 上传合同附件 -->
      <el-dialog
        title="工资表附件"
        :visible.sync="uploadContract"
        :modal-append-to-body="false"
        :append-to-body="true"
        width="900px"
      >
        <uploadAnnex
          style="margin-top: 8px"
          @getFileList="getFileList"
          :limitationFactor="limitationFactor"
          @getFile="getFile"
          :upLoadFile="uploadImg"
        />
        <div style="margin-top: 20px">
          <contractEnclosure
            :isShowType="true"
            :tableData="uploadImg"
            isDel="true"
            @changeFileList="changeFileList"
          ></contractEnclosure>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="cancelUpload" class="cancel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click.native="saveUpload"
            class="save"
            :loading="canLogin"
            >保存</el-button
          >
        </div>
      </el-dialog>
      <!-- 下载受理单 -->
      <div
        :style="{
          position: 'absolute',
          top: '1220px',
          display: centerDialogVisible ? 'block' : 'none',
        }"
        id="authorizationSheet"
      >
        <table class="top-left">
          <tr>
            <td colspan="2" class="sheetTitle">工资发放授权单</td>
          </tr>
          <tr>
            <td colspan="2" class="clearfix">
              <div class="tr-left">
                <p>{{ offinePayDate.salaryInfo }}</p>
                <div v-if="isEsUser()" class="tr-left-tip">
                  订单生成时间：{{ offinePayDate.createTime || '--' }}
                </div>
                <p>{{ offinePayDate.orderId }}</p>
              </div>
              <div class="tr-right">
                <div class="tr-right-top clearfix">
                  <div class="tr-right-code fl">
                    <img class="srcCodeImg" :src="srcCode" alt />
                  </div>
                  <div class="tr-right-barCode fl">
                    <img class="barCodeCodeImg" :src="barCode" alt />
                  </div>
                </div>
                <div class="tr-right-tip">
                  提示：通过扫描二维码或条形码可快捷获取工资表订单
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="2" class="projectInformation">项目信息</td>
          </tr>
          <tr>
            <td colspan="2" class="tdLeft">
              项目名称：{{ offinePayDate.projectName || '--' }}
            </td>
          </tr>
          <tr>
            <td colspan="2" class="tdLeft">
              建设方：{{ offinePayDate.pcName || '--' }}
            </td>
          </tr>
          <tr>
            <td class="tdLeft">施工方：{{ offinePayDate.pbName }}</td>
            <td class="tdLeft">
              施工方法人姓名：{{ offinePayDate.companyBoss || '--' }}
            </td>
          </tr>
          <tr>
            <td colspan="2" class="tdLeft">
              项目负责人姓名：{{ offinePayDate.projectAdmin || '--' }}
            </td>
          </tr>
          <tr>
            <td colspan="2" class="tdLeft">
              项目地址：{{ offinePayDate.address || '--' }}
            </td>
          </tr>
          <tr>
            <td class="tdLeft">
              专户账号：{{ offinePayDate.account || '--' }}
            </td>
            <td class="tdLeft">
              代发总人数：{{ offinePayDate.shouldCount || '--' }}人
            </td>
          </tr>
          <tr>
            <template v-if="isEsUser()">
              <td class="tdLeft">
                专户签约状态：<span
                  :style="offinePayDate.signed === 0 ? 'color:red' : ''"
                  >{{ offinePayDate.signed === 1 ? '已签约' : '未签约' }}</span
                >
              </td>
              <td class="tdLeft">
                代发总金额：{{ offinePayDate.shouldPay || '--' }}元
              </td>
            </template>
            <template v-else>
              <td colspan="2" class="tdLeft">
                代发总金额：{{ offinePayDate.shouldPay || '--' }}元
              </td>
            </template>
          </tr>
        </table>
      </div>
      <!-- 驳回原因弹框 -->
      <dialogRejectReason
        v-if="dialogRejectshow"
        @closeDia="getCloseDia"
        :salaryId="salaryId"
        :projectId="projectId"
        :updaterId="updaterId"
      ></dialogRejectReason>
      <!-- 查看附件详情弹框 -->
      <el-dialog
        title="工资表附件"
        :visible.sync="uploadContractDetail"
        :modal-append-to-body="false"
        width="900px"
      >
        <contractEnclosure :isShowType="true" :tableData="uploadImg" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
import common from '../../kits/common'
import dialogRejectReason from '@/components/publicCom/dialogRejectReason'
import salaryAttachRecord from '@/components/smallProjectManage/salaryAttachRecord'
export default {
  name: 'companySalaryBatchList',
  mixins: [scrollTable],
  components: {
    dialogRejectReason,
    salaryAttachRecord,
  },
  props: {
    showHistory: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      isMini: 0,
      miniRule: {},
      salaryIdTwo: '',
      advanced: false,
      id: '',
      srcCode: '',
      barCode: '',
      offinePayDate: '',
      centerDialogVisible: false,
      projectList: [], //项目名称列表
      projectItem: '',
      projectId: '',
      projectName: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      date: [], //日期区间
      salaryStateOptions: [], //工资表状态下拉框
      requestUrl: 'api-su/cs/salary/expand/list',
      //表格数据
      salaryList: [],
      //分页
      // currentPage: 1,
      // total: 0,
      // pageSize: 10,
      yearQuery: '', //工资表详情id
      //搜索条件
      filterField: {
        sysAppCode: localStorage.getItem('judgeRoleCode'),
        projectId: '',
        createTimeStart: '',
        createTimeEnd: '',
        yearMonth: '',
        status: '',
        // isFileStr: '',
        isAttFileStr: '', //考勤
        isEmployeeFileStr: '', //工人签字
        isBankFileStr: '', //银行回执
      },
      isFileStrArr: [
        {
          id: '1',
          name: '是',
        },
        {
          id: '0',
          name: '否',
        },
      ],
      isShow: false, //列表加载
      loading: true,
      uploadImg: [],
      saveImgArr: [],
      srcList: [],
      oldSrcList: [],
      canLogin: false, //保存loading
      uploadContract: false, //上传合同附件
      salaryId: '', //工资id
      isShowDel: '',
      isShowUpdate: '',
      isShowAdd: '',
      isShowExport: '',
      isShowDetail: '',
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: ['salaryAtt', 'salaryExcel', 'salaryWord'], //自定义id解决一个页面包含多个上传附件
        uploadFormId: ['salaryAttForm', 'salaryExcelForm', 'salaryWordForm'], //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '请上传银行回执及工人签字确认表，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf,最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeFour', //自定义上传按钮类型
        UploadType: 'typeTwo',
      },
      dialogRejectshow: false,
      updaterId: '', //驳回原因弹框传参
      uploadContractDetail: false, //查看附件详情弹框
    }
  },
  async created() {
    this.showHistory &&
      (this.$store.state.activeMenu = '/home/salaryDf/companySalaryBatchList')

    this.$nextTick(function () {
      this.filterField.status = this.$route.query.stateFB
    })

    this.projectName = this.projectName
      ? this.projectName
      : this.$route.query.projectName
    await this.getProjectList()
    this.getMiniRule()
    //工资表状态下拉框
    this.getSalaryState()
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('csSalaryList:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csSalaryListSGF:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csSalaryListJSF:add') > -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('csSalaryList:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csSalaryListSGF:update') >
        -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csSalaryListJSF:update') > -1
    this.isShowDel =
      this.$store.state.buttonLimitsArr.indexOf('csSalaryList:delete') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csSalaryListSGF:delete') >
        -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csSalaryListJSF:delete') > -1
    this.isShowExport =
      this.$store.state.buttonLimitsArr.indexOf('csSalaryList:export') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csSalaryListSGF:export') >
        -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csSalaryListJSF:export') > -1
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('csSalaryList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csSalaryListSGF:detail') >
        -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csSalaryListJSF:detail') > -1
  },
  methods: {
    //获取小项目规则
    getMiniRule() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/findMiniProConfig',
        data: {
          projectId: this.projectId,
        },
      })
        .then((res) => {
          if (!res.data.hasError && res.data.result) {
            this.isMini = 1
            this.miniRule = res.data.result || {}
          } else {
            this.isMini = 0
          }
        })
        .catch((error) => {
          this.$message.error('查询失败')
        })
    },
    goHistory() {
      const path = '/home/smallProjectManage/salaryAttachRecordPage'
      const oldUrl = '/home/salaryDf/companySalaryBatchList'
      this.$router.push({
        path,
        query: {
          oldUrl,
          backPath: oldUrl,
          projectId: this.projectId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    /**
     * @description: 下载授权单
     */
    async downloaDauthorization(index, row) {
      this.centerDialogVisible = true
      this.salaryIdTwo = row.id
      this.updaterId = row.updaterId
      this.id = row.sequenceCode
      this.getBarimage()
      this.getQrimage()
      await this.getOffinePayDate()
      this.$nextTick(() => {
        this.toAuthorize()
      })
    },
    toAuthorize() {
      this.getPdf('authorizationSheet', '工资代发授权单')
      this.centerDialogVisible = false
    },
    /**
     * @description: 线下代发页面数据
     */
    getOffinePayDate() {
      const vm = this
      return vm
        .axios({
          method: 'post',
          url: 'api-su/cs/salary/expand/ustxx',
          data: {
            id: vm.salaryIdTwo,
          },
        })
        .then((res) => {
          if (!res.data.hasError) {
            vm.offinePayDate = res.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'warning',
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    /**
     * @description: 线下代发页面条形码
     */
    getBarimage() {
      const vm = this
      vm.barCode =
        common.commonApi + 'api-su/cs/salary/expand/barimage?info=' + vm.id
    },
    /**
     * @description: 线下代发页面二维码
     */
    getQrimage() {
      const vm = this
      vm.srcCode =
        common.commonApi + 'api-su/cs/salary/expand/qrimage?info=' + vm.id
    },
    // changeProject (val) {
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.createTimeStart = val
      } else {
        this.filterField.createTimeStart = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.createTimeEnd = val
      } else {
        this.filterField.createTimeEnd = ''
      }
    },
    changeProject(val) {
      this.projectId = val
      this.getMiniRule()
      localStorage.setItem('projectSalary', this.projectId)
      let obj = {}
      obj = this.projectList.find((item) => {
        return item.code === val
      })

      this.projectItem = obj
      this.filterField.projectId = this.projectItem.code
      this.projectName = this.projectItem.name
      this.$nextTick(function () {
        this.$refs.pagination.getTableListData()
      })
    },
    //获取项目列表
    getProjectList() {
      return this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/current/projects',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.projectList = response.data.result
              //建筑端企业端项目详情跳转工资表,判断路由是否传项目id与项目名称
              if (response.data.result.length > 0) {
                if (this.$route.query.projectId) {
                  this.projectId = this.$route.query.projectId
                  this.filterField.projectId = this.projectId
                  let obj = {}
                  obj = this.projectList.find((item) => {
                    return item.code === this.projectId
                  })
                  this.projectItem = obj
                  this.projectName = obj.name
                } else {
                  let falg = false
                  if (this.projectList.length) {
                    this.projectList.forEach((item) => {
                      if (item.code == localStorage.getItem('projectSalary')) {
                        this.falg = true
                      }
                    })
                  }
                  if (localStorage.getItem('projectSalary') && falg) {
                    this.projectId = localStorage.getItem('projectSalary')
                  } else {
                    this.projectId = response.data.result[0].code
                  }
                  // this.projectId = response.data.result[0].code;
                  this.projectName = response.data.result[0].name
                  this.projectItem = response.data.result[0]
                  localStorage.setItem('projectSalary', this.projectId)
                  this.filterField.projectId = this.projectId
                }
              } else {
                this.$nextTick(function () {
                  this.$refs.pagination.getTableListData()
                })
                if (
                  localStorage.getItem('judgeRoleCode') === 'owner' ||
                  localStorage.getItem('judgeRoleCode') === 'constructor'
                ) {
                  return
                } else {
                  this.$alert('您还未加入项目请前往项目申请页面申报项目', '', {
                    confirmButtonText: '确定',
                    confirmButtonClass: 'messageButColor',
                    showClose: false,
                  })
                    .then(() => {
                      this.$router.push({
                        path: '/home/project/projectDeclareList',
                        name: 'projectDeclareList',
                        query: {
                          type: 'projectDeclareList',
                        },
                      })
                      this.$store.commit('CHANGE_SLIDER_NAME', {
                        oldUrl: '/home/project/projectDeclareList',
                        newUrl: this.$router.currentRoute.fullPath,
                      })
                    })
                    .catch(() => {})
                }
              }
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData()
              })
            } else {
              this.$message.error('项目数据获取失败')
            }
          },
          (res) => {
            this.$message.error('项目数据获取失败')
          }
        )
        .catch((error) => {
          this.$message.error('项目数据获取失败')
        })
    },
    getTableList(data) {
      this.salaryList = data
      this.loading = false
      if (this.salaryList.length < 1) {
        this.isShow = true
      }
    },
    getSalaryState() {
      this.axios({
        method: 'post',
        url: 'api-su/cs/salary/expand/status',
      })
        .then((response) => {
          this.salaryStateOptions = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    downLoad(type) {
      this.axios({
        method: 'post',
        url: 'api-su/salary/expand/findurl',
        data: {
          name: type,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              window.open(response.data.result.url)
            } else {
              this.$message({
                type: 'error',
                message: response.data.msg,
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //跳转详情，审核
    toSalaryDetail(index, row, isSH) {
      this.$router.push({
        path: '/home/salaryDf/salaryPayBatchDetailList',
        name: 'salaryPayBatchDetailList',
        query: {
          salaryId: row.id,
          yearQuery: row.year,
          monthQuery: row.month,
          batchNo: row.batchNo,
          statusQuery: row.status,
          sequenceCode: row.sequenceCode,
          projectId: this.projectId,
          rejectReason: row.rejectReason,
          isSH: isSH, //是否是审核页面，审核页面详情有操作，
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salaryDf/companySalaryBatchList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    handleEdit(index, row) {
      this.$router.push({
        path: '/home/constructSalary/editConstructSalary',
        name: 'editConstructSalary',
        query: {
          salaryId: row.id,
          month: row.month,
          year: row.year,
          projectId: row.projectId,
          projectName: row.projectName,
          type: 'list',
          sequenceCode: row.sequenceCode,
          batchNoInfo:
            row.year + '年' + row.month + '月第' + row.batchNo + '批次工资',
          isRejecded: row.status == 'REJECTED' ? 1 : 0,
          rejectReason: row.rejectReason,
        },
      })

      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salaryDf/companySalaryBatchList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    toUploadFile(index, row) {
      this.salaryId = row.id
      this.uploadImg = []
      this.saveImgArr = []
      this.srcList = []
      this.oldSrcList = []
      this.getUploadSearchImg(this.salaryId)
      this.uploadContract = true
    },
    // 获取附件查询图片
    getUploadSearchImg(salaryId) {
      var data = {
        associatedName: 'T_CS_SALARY',
        associatedId: salaryId,
      }
      this.axios({
        method: 'post',
        url: 'api-f/files/list',
        data: data,
      })
        .then((response) => {
          // this.bankData = response.data;
          if (!response.data.hasError) {
            this.uploadImg = response.data.result
          } else {
            this.$message({
              type: 'error',
              message: '数据获取失败',
            })
          }
        })
        .catch((error) => {})
    },
    cancelUpload() {
      this.uploadContract = false
    },
    //保存附件
    saveUpload() {
      var arr = []
      this.uploadImg.forEach((items) => {
        arr.push({
          originalName: items.name,
          relativePath: items.path,
          fileSize: items.size,
          fileType: items.contentType,
          createTime: items.createTime,
          remark: items.remark,
        })
      })
      this.canLogin = true
      var data = {
        files: this.packageParams(arr),
        salaryId: this.salaryId,
      }
      this.axios({
        method: 'post',
        url: 'api-su/cs/salary/expand/upfile',
        data: data,
      })
        .then((response) => {
          this.canLogin = false
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: response.data.result,
            })
            this.uploadContract = false
            this.$refs.pagination.getTableListData() //列表中的按钮只加载列表
          } else {
            this.$message({
              type: 'error',
              message: '保存失败',
            })
          }
        })
        .catch((error) => {
          this.canLogin = false
        })
    },
    //下载工资表工资表
    exporTableAjax(index, row) {
      var id = row.id
      var year = row.year
      window.location.href =
        common.commonApi +
        'api-su/cs/salary/expand/export?salaryId=' +
        id +
        '&year=' +
        year +
        '&access_token=' +
        localStorage.getItem('access_token')
    },
    deleteSalary(index, row) {
      this.$confirm('确认删除该工资表吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.toDel(row.id, row.year)
        })
        .catch(() => {
          // this.$message.error("删除失败");
        })
    },
    toDel(salaryId, year) {
      this.axios({
        method: 'post',
        url: 'api-su/cs/salary/expand/delete',
        data: {
          salaryId: salaryId,
          year: year,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              //删除成功刷新列表
              this.$refs.pagination.getTableListData()
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //跳转制作工资表
    toCreateSalary() {
      // this.$router.push("/home/constructSalary/createConstructSalaryWay");
      localStorage.removeItem('projectSalary')
      this.$router.push({
        path: '/home/constructSalary/createConstructSalaryWay',
        name: 'createConstructSalaryWay',
        query: {
          projectId: this.projectId,
          projectName: this.projectName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salaryDf/companySalaryBatchList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //立即支付
    toPay(index, row) {
      this.$router.push({
        path: '/home/constructSalary/constructPaySalary',
        name: 'constructPaySalary',
        query: {
          salaryId: row.id,
          month: row.month,
          year: row.year,
          projectId: row.projectId,
          projectName: row.projectName,
          type: 'list',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salaryDf/companySalaryBatchList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    getFile(val) {
      this.uploadImg.push(val)
      // this.saveImgArr.push({
      //   originalName: val.name,
      //   relativePath: val.path,
      //   fileSize: val.size,
      //   fileType: val.contentType
      // });
    },
    changeFileList(val) {
      this.uploadImg = val
    },
    //施工方审核
    toCheckSG(index, row) {
      this.$router.push({
        path: '/home/constructSalary/editConstructSalary',
        name: 'editConstructSalary',
        query: {
          salaryId: row.id,
          month: row.month,
          year: row.year,
          batchNo: row.batchNo,
          projectId: row.projectId,
          projectName: row.projectName,
          type: 'list',
          review: 1,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salaryDf/companySalaryBatchList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 分包单位撤回待审核的工资表
    toRecall(index, row) {
      this.$confirm(
        '撤回后可重新编辑工资表，项目管理员无法查看该工资表，是否确认撤回工资表？ 点击确认则变更状态为待提交',
        '提示',
        {
          cancelButtonClass: 'btn-custom-cancel',
          type: 'warning',
        }
      )
        .then(() => {
          let params = {
            salaryId: row.id,
            year: row.year,
            status: 'CONFIRMED',
            rejectReason: '',
          }
          this.axios
            .post('api-su/cs/salary/expand/updateSalaryStatus', params)
            .then((res) => {
              if (!res.data.hasError) {
                this.$message({
                  type: 'success',
                  message: '工资表已撤回',
                })
                this.searchList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.data.errorMsg,
                })
              }
            })
        })
        .catch(() => {})
    },
    toOpenDialogReject(index, row) {
      this.salaryId = row.id
      this.updaterId = row.updaterId
      this.projectId = row.projectId
      this.dialogRejectshow = true
    },
    //关闭弹框
    getCloseDia() {
      this.dialogRejectshow = false
    },
    toUploadFileDetail(index, row) {
      this.salaryId = row.id
      this.getUploadSearchImg(this.salaryId)
      this.uploadContractDetail = true
    },
    // 判断是否能制作工资表
    hasToCreateSalary() {
      this.axios({
        method: 'post',
        url: 'api-su/cs/salary/expand/checkAccountSignForSalary',
        data: {
          projectId: this.projectId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.toCreateSalary()
            } else {
              this.goAccount(response.data)
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    goAccount(data) {
      this.$confirm(data.msg, '提示', {
        confirmButtonText: '查看专户',
        cancelButtonText: '关闭',
        type: 'warning',
      })
        .then(() => {
          this.$router.push({
            path: '/home/specialAccount/specialAccountList',
            name: 'specialAccountList',
            query: {
              projectName: data.errorCode,
            },
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/specialAccount/specialAccountList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../../static/css/filterArea.less';
.reminder {
  color: #666;
  font-size: 14px;
  background: #fffbe6;
  line-height: 36px;
  border-radius: 3px;
  padding: 0 24px;
  i {
    color: #ffaa00;
    margin-right: 4px;
    font-size: 20px;
    vertical-align: -2px;
  }
}
.topSection {
  height: 64px;
  background: #fff;
  border-radius: 4px 4px 0 0;
  padding: 16px 24px 16px 10px;
  .topBox {
    .projectState {
      display: inline-block;
      width: 60px;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #fff;
      text-align: center;
      margin-left: 10px;
      font-weight: normal;
      margin-top: 5px;
    }
    .alignRight {
      position: relative;
    }
    .btnBox {
      // width: 230px;
      position: absolute;
      right: 0;
    }
    /deep/.el-input__inner {
      width: 346px;
      font-size: 24px;
      font-weight: bold;
      color: #333333;
      border: none;
      height: 30px;
      // background: #E4EBF1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /deep/.el-select__caret {
      color: #333;
      font-size: 20px;
      line-height: 30px;
    }
  }
  /deep/.commonTab {
    margin-top: 21px;
  }
  /deep/.is-active {
    background: #fff;
  }
}
.createSalaryBut {
  padding: 7px 20px !important;
  margin-left: 8px;
}
.topContent {
  background: #e4ebf1;
  height: 83px;
  line-height: 56px;
  padding: 15px 24px;
  margin: 24px;
  .titleTop {
    font: bold 18px Microsoft YaHei;
    color: #333333;
  }
}
.generationMethod {
  display: inline-block;
  width: 60px;
  line-height: 20px;
  border: 1px solid #009588;
  font-family: SourceHanSansCN-Normal;
  font-size: 12px;
  color: #009588;
  text-align: center;
}
.toDownload {
  font-size: 14px;
  color: #0098ce;
  cursor: pointer;
  &:hover {
    color: #0070f5;
    border-bottom: 1px solid #0070f5;
  }
}

.uploadBtn {
  line-height: 20px;
}

.mainCon {
  top: 233px;
  padding: 0;
}
.uploadBox {
  position: relative;
  .upLoadDom {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    input {
      // font-size: 0;
      width: 136px;
      height: 36px;
      cursor: pointer;
    }
  }
}
.imgStyle {
  margin-top: 20px;
  li {
    position: relative;
    margin-right: 20px;
    margin-top: 10px;
    i {
      position: absolute;
      right: -6px;
      top: -10px;
      font-size: 20px;
    }
  }
}
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .searchInputWidth /deep/.el-form-item__label {
    width: 90px;
  }
}
.downshoulidan {
  /deep/ .el-dialog__header {
    padding: 0 !important;
    border-bottom: 0px;
  }
}
#authorizationSheet {
  width: 720px;
  height: 413px;
  text-align: center;
  margin: auto;

  .sheetTitle {
    font-family: SourceHanSansCN-Medium;
    font-size: 24px;
    color: #1f803b;
    background-color: #eaf6ec;
  }

  .top-left {
    width: 720px;
    height: 413px;
    border: 1px solid #1f803b;
    border-collapse: collapse;
    td {
      border: 1px solid #1f803b;
    }
  }
}
.top-title {
  width: 720px;
  height: 33px;
  display: inline-block;
  text-align: right;
}
.tr-left {
  float: left;
  font-family: SourceHanSansCN-Bold;
  font-size: 20px;
  color: #218b3d;
  margin-left: 10px;
  position: relative;
  p:first-child {
    padding: 10px.0;
  }
  p:last-child {
    width: 340px;
    height: 51px;
    line-height: 51px;
    font-family: SourceHanSansCN-Bold;
    font-size: 30px;
    color: #1f803b;
    background: #eaf6ec;
  }
  .tr-left-tip {
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #1f803b;
    line-height: 14px;
    position: absolute;
    bottom: -20px;
    left: 10px;
  }
}
.tr-right {
  float: left;
  margin-left: 70px;
  &-top {
    width: 291px;
    // height: 66.4px;
    // margin-top: 10px;
  }
  &-tip {
    font-family: SourceHanSansCN-Regular;
    font-size: 12px;
    color: #333333;
    // margin-top: 10px;
    line-height: 14px;
  }
  &-code {
    width: 100px;
    height: 100px;
  }
  &-barCode {
    width: 160px;
    height: 58px;
    margin-top: 20px;

    margin-left: 17.7px;
  }
}
.projectInformation {
  background: #eaf6ec;
  font-family: SourceHanSansCN-Medium;
  font-size: 14px;
  color: #1f803b;
}
.tdLeft {
  padding-left: 20px;
  text-align: left;
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  color: #1f803b;
}
.srcCodeImg {
  width: 100%;
  height: 100%;
}
.barCodeCodeImg {
  width: 100%;
  height: 100%;
}
.lineFeedSty {
  /deep/.el-form-item__label {
    line-height: 18px !important;
  }
}
.alignRight {
  text-align: right;
}
</style>
